<template>
    <v-container>
        <v-form v-model="valid">
            <v-container>
                <v-row align="center">
                    <v-col md="4">
                        <v-file-input
                            accept=".xls,.xlsx"
                            prepend-icon="mdi-microsoft-excel"
                            label="选择族谱数据Excel文件"
                            v-model="file"
                            :error-messages="errorMessage"
                        ></v-file-input>
                    </v-col>
                    <v-col cols="8">
                        <v-btn
                            color="primary"
                            @click="submitFile"
                            :loading="loading"
                            :disabled="loading"
                            >生成族谱图</v-btn
                        >
                        <span class="caption blue--text tips">
                            注意：Excel中包含多个工作表时，将使用最后一个工作表生成族谱图</span
                        >
                    </v-col>
                </v-row>
            </v-container>
        </v-form>
        <v-sheet color="white" elevation="5" height="600" width="100%">
            <v-chart class="chart" :option="option"></v-chart>
        </v-sheet>
    </v-container>
</template>
<script>
export default {
    data() {
        return {
            valid: true,
            file: null,
            errorMessage: null,
            customerData: null,
            loading: false,
        };
    },
    watch: {
        file(value) {
            if (value) {
                this.errorMessage = null;
            }
        },
    },
    mounted() {},
    methods: {
        submitFile() {
            if (!this.file) {
                this.errorMessage = "请选择Excel文件";
                return false;
            }
            const formData = new FormData();
            formData.append("file", this.file);
            const option = {
                method: "POST",
                url: "/customer/tree",
                headers: {
                    "content-type": "multipart/form-data;charset=UTF-8",
                },
                data: formData,
            };
            this.loading = true;
            this.$request(option).then((response) => {
                this.loading = false;
                if (response.status == 200) {
                    this.customerData = response.data;
                } else {
                    this.errorMessage = "服务请求错误，请稍后重试";
                }
            });
        },
    },
    computed: {
        option() {
            const data = this.customerData ? [this.customerData] : [];
            return {
                tooltip: {
                    trigger: "item",
                    triggerOn: "mousemove",
                    formatter(params) {
                        return params.value;
                    },
                },
                series: [
                    {
                        type: "tree",
                        data: data,
                        top: "1%",
                        left: "7%",
                        bottom: "1%",
                        right: "20%",
                        initialTreeDepth: 1,
                        label: {
                            position: "left",
                            verticalAlign: "middle",
                            align: "right",
                            fontSize: 12,
                        },
                        leaves: {
                            label: {
                                position: "right",
                                verticalAlign: "middle",
                                align: "left",
                            },
                        },
                        emphasis: {
                            focus: "descendant",
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750,
                    },
                ],
            };
        },
    },
};
</script>
<style scoped>
.tips {
    margin-left: 20px;
}
.chart {
    height: 100%;
}
</style>
